<template>
	<view class="container">
		<view style="width: 100%;min-height: 100%;padding-top: 20upx;padding-bottom: 20upx;float: left;">
			 <view class="ordercard" v-for="(item,index) in 5" :class="{'firstcard':index==0}">
			 	<view class="ordercard-nav" >
			 		<text>工种：水电、开锁、水电</text>
			 		<view class="orderstatus">
			 			<text>等待上门</text>
			 			<u-icon name="arrow-right" size="30"></u-icon>
			 		</view>
			 	</view>
			 	<view class="orderservice">
			 		 <view class="serviceitem">
			 		 	<text class="servicetitle">上门时间：</text>
			 			<text class="servicevalue">9月5日 5:00 至 6:00</text>
			 		 </view>
			 		 <view class="serviceitem">
			 		 	<text class="servicetitle">客户姓名：</text>
			 		 	<text class="servicevalue">李静</text>
			 		 </view>
			 		 <view class="serviceitem">
			 		 	<text class="servicetitle">上门地址：</text>
			 		 	<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
			 		 </view>
			 	</view>
			 	<view class="ordercard-btns">
			 		   <view class="ordercard-btnitem">
			 		   	      <text>取消订单</text>
			 		   </view>
			 	</view>
			 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
      page{
		  width: 100%;
		  height: 100%;
	  }
	  .container{
		  width: 100%;
		  min-height: 100%;
		  background-color: rgba(244, 248, 251, 1);
		  float: left;
		  .ordercard{
			  background-color: #FFFFFF;
			  width: 700upx;
			  height: auto;
			  border-radius: 30upx;
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  margin: auto;
			  margin-top: 20upx;
			  .ordercard-nav{
				  width: 660upx;
				  height: 80upx;
				  margin-top: 20upx;
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  font-size: 30upx;
				  font-weight: 600;
				  .orderstatus{
					  color: rgba(136, 136, 136, 1);
					  font-weight: 500;
				  }
			  }
			 .orderservice{
				 width: 660upx;
				 height: auto;
				 display: flex;
				 flex-direction: column;
				 justify-content: space-between;
				 padding-bottom: 20upx;
				 border-bottom: 1upx solid #F1F1F1;
				 .serviceitem{
					 width: 100%;
					 height: auto;
					 display: flex;
					 margin-top: 20upx;
					 color: rgba(34, 34, 34, 1);
					 font-size: 30upx;
					 .servicetitle{
						display: block;
						word-break: break-all;
					 }
					 .servicevalue{
						 display: block;
						 width: 500upx;
						 word-break: break-all;
					 }
				 }
			 }
			 .ordercard-btns{
				 width: 100%;
				 height: 120upx;
				 display: flex;
				 justify-content: flex-end;
				 align-items: center;
				 .ordercard-btnitem{
					 width: 200upx;
					 border: 1upx solid rgba(135,135,135,0.8);
					 height: 70upx;
					 display: flex;
					 align-items: center;
					 justify-content: center;
					 font-size: 30upx;
					 border-radius: 10upx;
					 margin-right: 20upx;
				 }
			 }
		  }
		  .firstcard{
			  margin-top: 0upx;
		  }
	  }
</style>
